<template>
	<div>
		<el-dialog
			title="修改分类"
			:visible.sync="dialogVisible"
			width="50%"
			:before-close="handleClose"
			@close="DialdgClose"
		>
			<!-- 内容区域 -->
			<el-form :model="FormData" :rules="FormRules" ref="FormRef" label-width="100px">
				<el-form-item label="分类名称：" prop="cateName">
					<el-input v-model="FormData.cateName"></el-input>
				</el-form-item>
			</el-form>

			<!-- 底部区域 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		//是否弹出
		dialogVisible: {
			type: Boolean,
			default: false
		},
		cateid: {
			type: parseInt,
			default: 0
		}
	},
	data() {
		return {
			FormData: {
				id: 0,
				cateName: ''
			},
			FormRules: {
				cateName: [
					{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done()
				})
				.catch(_ => {})
		},
		//监听关闭添加用户的对话框事件
		DialdgClose() {
			this.$refs.FormRef.resetFields()
		},
		save() {
			this.$refs.FormRef.validate(valid => {
				if (valid) {
					this.$get('/api/Cate/EidtCateName', this.FormData).then(res => {
						if (res.code == 0) {
							this.$emit('dateupdata')
							this.$message({
								message: res.msg,
								type: 'success'
							})
							this.dialogVisible = false
						} else {
							this.$message.error(res.msg)
						}
					})
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		getCate() {
			this.$get('/api/Cate/GetCate', {
				Id: this.cateid
			}).then(res => {
				if (res.code == 0) {
					this.FormData.id=res.data.id;
					this.FormData.cateName=res.data.cateName;
				}
			}).catch(err=>{
				console.log(err)
			})
		}
	},
	watch: {
		dialogVisible: function(val) {
			let data = {
				IsShow: val
			}
			if (val == true) {
				this.getCate()
			}
			this.$emit('IsShowDialdg', data)
		}
	}
}
</script>